<template>
  <div>
    <div v-if="commentList.length && userData">
      <MyCommList
          v-for="(comment,index) in commentList" :key="index"
          :comments="comment"
          :user-data="userData"
      />
    </div>
    <div v-else> <el-empty description="您还没有评论数据哦！"/> </div>
    <el-pagination
        v-if="total > params.limit"
        layout="prev, pager, next"
        :total="total"
        :page-size="params.limit"
        @current-change="changePage"
    />
  </div>
</template>

<script>

import UserDetailService from '@/service/users/UserDetailService'
import MyCommList from '@/pages/user/components/MyCommList'

export default {
  name: "MyCommented",
  components:{
    MyCommList
  },
  data(){
    return {
      commentList: [],
      userData: null,
      params: {
        limit: 2,
        offset: 0
      },
      total: 0
    }
  },
  created(){
    this.getCommentData()
  },
  methods:{
    async getCommentData(){
      const res = await UserDetailService.getMyCommented(this.params)
      this.total = res.data.data.total
      this.commentList = res.data.data.commentList
      this.userData = res.data.data.userData
    },
    changePage(page){
      this.params.offset = (page - 1) * this.params.limit
      this.getCommentData()
    }
  }
}
</script>

<style scoped>

</style>

